<template>
<div>
<div style="margin-bottom:20px;">
  <div style="margin-bottom:20px;">直接在页面上写国际化，写法:$t("app.hello")</div>
 <KunkkaButton :label="$t('app.hello')" />
  
  <div>
    {{$t("kunkka.example.name")}}
  </div>
  <div>
  
  </div>
  </div>

  <div style="margin-bottom:20px;">
    <div style="margin-bottom:20px;">element组件的国际化</div>
     <el-pagination
   
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
    
 
  </div>
    <div>
    使用方法$getI18n
    <div>
      {{$getI18n('kunkka.example','sex')}}
    </div>
  </div>
    <div style="margin-bottom:20px;">
      <div>
        script中使用引用
         this.$t('app.hello')
      </div>
 <el-button type="success" @click="change('zh')" >切换中文</el-button>
 <el-button  type="danger" @click="change('en')" >切换英文</el-button>
   <div>
     动态切换方法 this.$changeLanguage('zh'||'en')
   </div>
  </div>
  <div>
    <h4>关于el-table的冲突解决</h4>
  <div>想在引用kunkka的项目内使用el-table，需单独按需引入elTable <br>
    import {Table} from 'element-ui'</div>
   <div>//  Vue.use(Table)必须在Vue.use(Kunkka)之后！！！</div> 
    Vue.use(Table)
    <div>没有数据时的提示文字，也需要使用:empty-text="$t('')" <br>
    原组件的国际化失效
    </div>
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        :label="$getI18n('testTable.testTable','date')"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
       :label="$getI18n('testTable.testTable','name')"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
      :label="$getI18n('testTable.testTable','address')"
        >
      </el-table-column>
    </el-table>
  </div>

     <div class="markdown-body">
      <readme />
    </div>
  </div>
  
</template>

<script>
import readme from './docs/i18n.md'
export default {
  name:'i18n',
    components: {
    readme
  },
  created(){

  },
data() {
  return {
    currentPage4: 4,
         tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
  };
},
methods:{
  change(type){
    this.$changeLanguage(type)
  }
}
}
</script>

<style>

</style>